{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/home/css/upload.css?v={$version}">
{/block}

{block name="main"}

    <!-- 中间内容区域 -->
    <div class="content-area middle-content inline-box">
        {include file='user/member_left_nav'/}
        <div class="right-content-box inline-block" style="position: relative">
            <form id="form">
                <input id="title" type="text" name="title" class="no-title" placeholder="标题" value="{$vo.title}" />
                <div id="contentEditor" style="margin-bottom: 20px"></div>
                <button style="margin-left: 0px" type="button" id="submit" class="submit-btn">提交</button>
            </form>
        </div>
    </div>
    <!-- 中间内容区域 END -->
{/block}
{block name="script"}

    <script src="/static/home/lib/wangEditor.min.js?v={$version}"></script>
    <script>
        var E = window.wangEditor;
        var editor = new E('#contentEditor');
        editor.customConfig.uploadImgServer = '{:url('util/upload')}';
        editor.customConfig.uploadImgMaxLength = 1;
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'image',  // 插入图片
        ];
        editor.create();
        {if $vo.detail}
        editor.txt.html("{$vo.detail}");
        {/if}
        editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                if(result.errno == 0) {
                    var url = result.url
                    insertImg(url)
                }else {
                    alert('添加失败');
                }
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },

            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.url
                insertImg(url)

                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }
        $('#submit').on('click',function(){
            var url = "{$action}";
            var obj = new Object();
            obj.detail = editor.txt.html();
            obj.title = $('#title').val();
            {if condition="$vo.id"}
            obj.id = {$vo.id};
            {/if}
            $.post(url,obj,function(data){
                if(data.code != 1){
                    alert(data.msg);
                }else{
                    alert('发布成功');
                    window.location.href = '{$back_url}';
                }
            });
        });
    </script>
{/block}